<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : sticky</title>
        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .wrapper { height: 500px ; line-height: 300px ; font-size: 100px ; text-align: center ;  }
            .container { border: 1px solid red ; width: 150% ; margin-left: 50% ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #fffe8f; }

            .third { }
            .nav {
                position: sticky ;
                left : 0 ;
                width: 100px ;
                height: 300px ;
                background-color: rgba(238, 16, 0, 0.5);
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd">1</div>
        <div class="wrapper even">2</div>
        <div class="container">
            <div class="nav"></div>
            <div class="wrapper odd third">3</div>
            <div class="wrapper even">4</div>
            <div class="wrapper odd">5</div>
            <div class="wrapper even">6</div>
        </div>
        <div class="wrapper odd third">7</div>
        <div class="wrapper even">8</div>
        <div class="wrapper odd">9</div>
        <div class="wrapper even">10</div>

    </body>
</html>